<template>
  <div class="course-wrap">
    <van-nav-bar
      title="课程报名"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
      @click-right="getSearch"
    >
      <van-icon name="search" slot="right" />
    </van-nav-bar>
    <van-tabs v-model="active">
      <van-tab
        :title="item"
        v-for="(item, index) in topCategory"
        :key="index"
      ></van-tab>
    </van-tabs>
    <div class="goods-wrap">
      <div class="goods" v-for="(item, index) in goodsData" :key="index">
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Course",
  data() {
    return {
      active: 0,
      topCategory: ["推荐", "针灸", "健康", "....", "...."],
      goodsData: [
        {
          title: "辨别药材作用",
          info: "7小时收货时效"
        }
      ]
    };
  },
  methods: {
    getSearch() {}
  }
};
</script>
<style lang="scss" scoped>
.course-wrap {
  padding-top: 46px;
  .goods-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
</style>
